<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <title>HTTP</title>
    <style>
        * {
            font-size: 20px;
        }
    </style>
</head>
<body>
<span id="testAjax">
    原来的内容
</span>
<input type="button" value="testAjax" onclick="testAjax();"/>
<hr/>
<h1 id="href">当前页面的URL</h1>
userId: <input id="userId" value=""/><br/>
name: <input id="name" value="老陈"/><br/>
age: <input id="age" value="54"/>
<input type="button" value="post" onclick="add();"/>
<input type="button" value="put" onclick="update();"/>
<input type="button" value="get" onclick="get();"/>
<input type="button" value="del" onclick="del();"/>
<hr/>
</body>
</html>
<script src="js/jquery.3.2.1.min.js"></script>6
<script>
    function testAjax(){
        $('#testAjax').html('这是新的内容');
    }
    $('#href').html(location.href);
    var data = {"id": "9527", "name": $('#name').val(), "age": $('#age').val()};
    //post操作
    function add() {//post方法
        alert(`前端送过来的数据是：${JSON.stringify(data)}`);
        $.ajax({
            type: 'post',
            url: '/hello/add',
            //async: true,默认为true
            contentType: "application/json;charset=utf-8",
            data: JSON.stringify(data),
            success: function (data) {
                alert(`后端返回数据：${JSON.stringify(data)}`);
                $('#userId').val(data.id);
            },
            error: function (e) {
                alert(JSON.stringify(e));
            }
        });
    }

    //put操作
    function update() {
        alert(JSON.stringify(data));
        $.ajax({
            type: 'put',
            url: '/hello/update',
            async: true,
            contentType: "application/json;charset=utf-8",
            data: JSON.stringify(data),
            success: function (data) {
                alert(JSON.stringify(data));
            },
            error: function (e) {
                alert(JSON.stringify(e));
            }
        });
    }

    function get() {
        alert("前端要传输的数据为：" + JSON.stringify(data));
        $.ajax({
            type: 'get',
            url: '/hello/get',
            async: true,
            contentType: "application/json;charset=utf-8",
            data: data,
            success: function (data) {
                alert(JSON.stringify(data));
            },
            error: function (e) {
                alert(JSON.stringify(e));
            }
        });
    }

    function del() {
        //alert("前端要传输的数据为：" + JSON.stringify(data));
        alert(`前端送过来的数据是：${JSON.stringify(data)}`);
        $.ajax({
            type: 'delete',
            url: '/hello/delete',
            async: true,
            //contentType: "application/json;charset=utf-8",
            data: data,
            success: function (data) {
                alert(JSON.stringify(data));
            },
            error: function (e) {
                alert(JSON.stringify(e));
            }
        });
    }
</script>
















